<template>
    <div>
        <el-upload ref="upload" :action="uploadUrl" :data="uploadData" list-type="picture-card" :limit="limit" :file-list="imageUrlList"
                   :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                   :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                   :on-exceed="onExceed" append-to-body>
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ImageUpload",
        props: {
            limit: Number,
            value: {
                type: Array,
                default: new Array()
            },
            isThumbnails: {
                type: Number,
                default: 0
            },
            width: Number,
            height: Number,
        },
        data() {
            return {
                uploadUrl: process.env.VUE_APP_UPLOAD_URL,
                dialogImageUrl: '',
                dialogVisible: false,
                uploadData: {
                    project: "food-group",
                    isThumbnails: this.isThumbnails,
                    width: this.width,
                    height: this.height
                },
                imageList: this.value,
                imageUrlList: []
            };
        },
        mounted() {
        },
        watch: {
            value(val, oldVal) {
                this.imageList = val
                if (this.imageUrlList.length === 0) {
                    val.forEach(item => {
                        this.imageUrlList.push({
                            url: process.env.VUE_APP_FILE_URL + item
                        });
                    })
                }
            }
        },
        methods: {
            handleAvatarSuccess(res, file) {
                if (res.code !== '0') {
                    return this.$message.error(res.message)
                }
                res.data.forEach(item => {
                    if (item.code === '0') {
                        this.imageList.push(item.path)
                    } else {
                        return this.$message.error(item.message)
                    }
                })
            },
            beforeAvatarUpload(file) {
                if (this.isUploadCancel) return false
                const isJPG = file.type === 'image/jpeg'
                const isPNG = file.type === 'image/png'
                const isLt2M = file.size / 1024 / 1024 < 5

                if (!isJPG && !isPNG) {
                    this.$message.error('上传的文件只能是 JPG/PNG 格式!')
                    return false
                }
                if (!isLt2M) {
                    this.$message.error('上传的图片大小不能超过 5MB!')
                    return false
                }
                return true
            },
            handleRemove(file, fileList) {
                let path;
                if (file.response) {
                    path = file.response.data[0].path
                } else if (file.url) {
                    path = file.url.replace(process.env.VUE_APP_FILE_URL, '')
                }
                if (path) {
                    let index = this.imageList.findIndex(item => {
                        return path === item
                    })
                    this.imageList.splice(index, 1)
                }
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            onExceed(file, fileList) {
                this.$message.error('最多只能上传' + this.limit + "个图片")
            },
            clear() {
                this.value = []
                this.imageList = this.value
                this.imageList = []
                this.$refs.upload.clearFiles()
            }
        }
    }
</script>

<style scoped>

</style>